<template>
  <view class="home-container">
    <view class="video w-[100%] h-[422rpx] relative">
      <video
        id="myVideo"
        src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
        controls
        class="w-[100%] h-[100%]"
        poster="https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
      ></video>
      <view
        class="video-tag w-[130rpx] h-[50rpx] rounded-[40rpx] flex flex-row items-center justify-center absolute top-[30rpx] left-[30rpx] z-10"
      >
        <view
          class="w-[16rpx] h-[16rpx] bg-[#00B578] rounded-[50%] mr-[10rpx]"
        ></view>
        <text class="text-white text-[24rpx]">直播中</text>
      </view>
    </view>
    <!-- 滚动通知 -->
    <template v-if="newsOfNotice.length">
      <view
        class="notice-row module-part h-[90rpx] mx-[30rpx] flex flex-col items-center absolute top-[377rpx] z-10"
      >
        <uni-notice-bar
          scrollable
          single
          showIcon
          :text="newsOfNotice[0].content"
          showGetMore
          background-color="#ffffff"
          color="#333333"
          moreColor="#7c7c7c"
        ></uni-notice-bar>
      </view>
    </template>
    <!-- 快捷菜单 -->
    <view
      class="mt-[65rpx] h-[410rpx] bg-white p-[30rpx] box-border flex justify-between flex-wrap content-between"
    >
      <template v-for="(item, index) in menuList" :key="item.id">
        <view
          class="w-[330rpx] h-[160rpx] rounded-[16rpx] pl-[28rpx] pr-[10rpx] box-border flex flex-row justify-between items-center cursor-pointer"
          :style="`background: ${item.bgColor}`"
          @click="pageJump(item.url)"
        >
          <view class="flex flex-col">
            <text class="text-[#222222] text-[30rpx]">{{ item.name }}</text>
            <text class="text-[#666666] text-[20rpx] mt-[12rpx]">{{
              item.describe
            }}</text>
          </view>
          <image
            :src="item.icon"
            mode="scaleToFill"
            class="w-[78rpx] h-[70rpx]"
          />
        </view>
      </template>
    </view>
    <!-- 直播流区域 -->
    <view
      class="mt-[20rpx] mx-[20rpx] h-[258rpx] flex flex-row justify-between"
    >
      <view
        class="w-[345rpx] h-[100%] module-part flex flex-col relative text-center"
      >
        <view class="grow">
          <image
            src="https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            mode="aspectFill"
            class="w-[345rpx] h-[192rpx] rounded-t-[16rpx]"
          />
        </view>
        <view
          class="h-[66rpx] text-[#222222] text-[28rpx] flex justify-center items-center max-w-full overflow-hidden text-ellipsis line-clamp-1"
          >当事人+案由</view
        >
        <view
          class="w-[80rpx] h-[30rpx] rounded-tr-[16rpx] rounded-bl-[16rpx] bg-[#53D06C] flex flex-row items-center justify-center absolute top-0 right-0 z-10"
        >
          <image
            src="@/static/images/icon-inlive.png"
            mode="aspectFit"
            class="w-[15rpx] h-[13rpx] mr-[4rpx]"
          />
          <text class="text-white text-[16rpx]">直播中</text>
        </view>
      </view>
      <view
        class="w-[345rpx] h-[100%] module-part flex flex-col relative text-center"
      >
        <view class="grow">
          <image
            src="https://img1.baidu.com/it/u=2106142011,1410854447&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=26d84943f61687a3f3e58b83205966cd"
            mode="aspectFill"
            class="w-[345rpx] h-[192rpx] rounded-t-[16rpx]"
          />
        </view>
        <view
          class="h-[66rpx] text-[#222222] text-[28rpx] flex justify-center items-center max-w-full overflow-hidden text-ellipsis line-clamp-1"
          >当事人+案由</view
        >
        <view
          class="w-[80rpx] h-[30rpx] rounded-tr-[16rpx] rounded-bl-[16rpx] bg-[#5385D0] flex flex-row items-center justify-center absolute top-0 right-0 z-10"
        >
          <image
            src="@/static/images/icon-playback.png"
            mode="aspectFit"
            class="w-[14rpx] h-[14rpx] mr-[4rpx]"
          />
          <text class="text-white text-[16rpx]">回放</text>
        </view>
      </view>
    </view>
    <!-- 资讯新闻列表 -->
    <view class="w-[100%] p-[30rpx] box-border bg-white mt-[20rpx]">
      <view
        class="news-head flex flex-row items-center justify-between mb-[20rpx]"
      >
        <view class="news-tab flex flex-row items-baseline relative">
          <view
            :class="
              currentTab == 0 ? 'tab-active tab-item' : 'tab-normal tab-item'
            "
            @click="changeTab(0)"
          >
            <text>资讯</text>
          </view>
          <view
            :class="
              currentTab == 1 ? 'tab-active tab-item' : 'tab-normal tab-item'
            "
            @click="changeTab(1)"
          >
            <text>公告</text>
          </view>
          <image
            src="@/static/images/tab-line.png"
            mode="aspectFit"
            class="w-[50rpx] h-[15rpx] tab-line"
            :style="tabLineStyle"
          />
        </view>
        <view class="text-[#999999] text-[24rpx]" @click="scanMoreNews"
          >查看更多 ></view
        >
      </view>
      <view class="news-content">
        <template v-if="currentTab === 0">
          <view
            class="h-[210rpx] mb-[30rpx]"
            v-for="(item, index) in newsOfMsg"
            :key="index"
          >
            <newsItem :newsContent="item" @click="scanNewsDetail"></newsItem>
          </view>
        </template>
        <template v-if="currentTab === 1">
          <view
            class="h-[210rpx] mb-[30rpx]"
            v-for="(item, index) in newsOfNotice"
            :key="index"
          >
            <newsItem :newsContent="item" @click="scanNewsDetail"></newsItem>
          </view>
        </template>
      </view>
    </view>
    <!-- 版权信息 -->
    <view
      class="flex flex-col text-[#A4B3DC] text-center text-[18rpx] leading-[25rpx] my-[30rpx]"
    >
      <text>本服务由XXXXXXXX提供</text>
      <text>服务咨询热线：012-1325687</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import spajIcon from "@/static/images/menu-spaj.png";
import spsqIcon from "@/static/images/menu-spsq.png";
import sszbIcon from "@/static/images/menu-sszb.png";
import yjfkIcon from "@/static/images/menu-yjfk.png";

import { listNews, listNotice } from "@/api/news";

const menuList = reactive([
  {
    id: 1,
    name: "巡回审判申请",
    describe: "查看案件，上传资料",
    icon: spsqIcon,
    url: "/subPages/home/apply/index",
    bgColor: "#F6F8FF",
  },
  {
    id: 2,
    name: "巡回审判案件",
    describe: "查看案件，上传材料",
    icon: spajIcon,
    url: "/subPages/home/case/list/index",
    bgColor: "#FFFAF6",
  },
  {
    id: 3,
    name: "诉讼直播",
    describe: "观看庭审现场直播画面",
    icon: sszbIcon,
    url: "/subPages/home/liveLitigation/index",
    bgColor: "#F0FFFF",
  },
  {
    id: 4,
    name: "意见反馈",
    describe: "提交反馈意见",
    icon: yjfkIcon,
    url: "/subPages/home/feedback/add",
    bgColor: "#F9F6FF",
  },
]);
const currentTab = ref(0);
const tabLineStyle = ref("transform: translateX(12rpx)");
const newsOfMsg = ref(<any>[]);
const newsOfNotice = ref(<any>[]);

// 浏览更多喜资讯/公告
const scanMoreNews = () => {
  uni.navigateTo({
    url: "/subPages/news/list",
  });
};
const scanNewsDetail = () => {
  uni.navigateTo({
    url: "/subPages/news/detail?id=1",
  });
};
const pageJump = (url: string) => {
  uni.navigateTo({
    url,
  });
};
const changeTab = (tabIndex: any) => {
  currentTab.value = tabIndex;
  if (tabIndex == 0) {
    tabLineStyle.value = "transform: translateX(12rpx)";
    // getNewsList();
  }
  if (tabIndex == 1) {
    tabLineStyle.value = "transform: translateX(163rpx)";
    // getNoticeList();
  }
};

// 获取资讯列表数据
const getNewsList = async () => {
  const { rows } = await listNews({
    pageSize: 1,
    pageNum: 3,
  });
  newsOfMsg.value = rows ?? [];
};

// 获取公告列表数据
const getNoticeList = async () => {
  const { rows } = await listNotice({
    pageSize: 1,
    pageNum: 3,
  });
  newsOfNotice.value = rows ?? [];
};

const initData = () => {
  getNewsList();
  getNoticeList();
};

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.home-container {
  /* 留出底部安全区域 */
  padding-bottom: calc(
    198rpx + constant(safe-area-inset-bottom)
  ); /* iOS < 11.2 */
  padding-bottom: calc(198rpx + env(safe-area-inset-bottom)); /* iOS >= 11.2 */
  min-height: calc(100vh - 198rpx - env(safe-area-inset-bottom));
  .video-tag {
    background: rgba(0, 0, 0, 0.5);
  }
  .notice-row {
    width: calc(100% - 60rpx);
  }
  .uni-noticebar {
    border-radius: 16rpx;
  }
  :deep(.uni-noticebar-icon) {
    font-size: 46rpx !important;
  }
  :deep(.uniui-sound:before) {
    content: "";
    display: block;
    width: 46rpx;
    height: 46rpx;
    background-image: url("@/static/images/icon-notice.png");
    background-size: cover;
    background-position: center;
  }
  .tab-item {
    margin-right: 90rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tab-active {
    color: #222222;
    font-size: 38rpx;
  }
  .tab-normal {
    color: #666666;
    font-size: 30rpx;
  }
  .tab-line {
    position: absolute;
    top: 63rpx;
    transition-property: color, -webkit-transform;
    transition-property: transform, color;
    transition-property: transform, color, -webkit-transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
}
</style>
